<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饼图数据展示</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的堆积柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>饼图展示-景区与销量</h1>
            <select name="area" id="">
                <option value="西藏" class="one">西藏</option>
                <option value="张家界" class="two">张家界</option>
                <option value="大理" class="three">大理</option>
                <option value="长沙" class="four">长沙</option>
            </select>
        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content" style="height: 100%">
        <!-- 内容展示 -->
        <div class="show-content" id="main" style="height: 93%; "></div>

    </div>

    <!-- 时间 -->
    <script src="../static/assets/js/index.js"></script>
    <!-- 饼图 -->
    <script>
        // 西藏-饼图
        function xiZang(){
             var chartDom = document.getElementById('main');
            // 向将数据传入HTML, if语句清理销量为0的不传入
            chartDom.innerHTML = `
                {% for data in xizang %}
                    {% if data[6] != none %}
                        <p>{{ data[6] }}</p>
                        <p>{{ data[0] }}</p>
                    {% endif %}
                {% endfor %}
            `
            // 获取传入的数据且生成的所有p元素
            var oP = document.querySelectorAll("p");

            // 查看有多少p元素  150个p元素 ，即75对 景点-销量
            console.log(oP)

            // 将数组中的数据 传入字典
            var dict = [];
            // 每次循环添加一个键值对
            for(var i = 0; i < oP.length; i++){
                dict.push({"value": oP[i].innerText, "name": oP[i+1].innerText});
                i++;
            }
            console.log(dict);

            // 清除chartDom中的所有p元素 好展示图
            chartDom.innerHTML = '';

            // 制作图
            var myChart = echarts.init(chartDom);
            // 解决二次渲染问题：移除之前创建的实例并且重新创建一个Echarts实例
            document.getElementById("main").removeAttribute('_echarts_instance_');
            var option;

            option = {
              title: {
                text: '西藏景区-销量图',
                subtext: '饼图',
                left: 'center',
                  subtextStyle:{
                    fontSize:'14',
                    color:'rgba(0,0,0,0.89)'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '销量',
                  type: 'pie',
                  radius: '50%',
                    {#left: '400',#}
                  data: dict,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            option && myChart.setOption(option);
            };
        // 张家界-饼图
        function zjj(){
            var chartDom = document.getElementById('main');
            // 执行前清除 此时页面上所存在的饼图
            // 向将数据传入HTML, if语句清理销量为0的不传入
            chartDom.innerHTML = `
                {% for data in zjj %}
                    {% if data[6] != none %}
                        <p>{{ data[6] }}</p>
                        <p>{{ data[0] }}</p>
                    {% endif %}
                {% endfor %}
            `

            // 获取传入的数据且生成的所有p元素
            var oP = document.querySelectorAll("p");

            // 查看有多少p元素  150个p元素 ，即75对 景点-销量
            console.log(oP)

            // 将数组中的数据 传入字典
            var dict = [];
            // 每次循环添加一个键值对
            for(var i = 0; i < oP.length; i++){
                dict.push({"value": oP[i].innerText, "name": oP[i+1].innerText});
                i++;
            }
            console.log(dict);

            // 清除chartDom中的所有p元素 好展示图
            chartDom.innerHTML = '';

            // 制作图
            var myChart = echarts.init(chartDom);
            document.getElementById("main").removeAttribute('_echarts_instance_');
            var option;

            option = {
              title: {
                text: '张家界景区-销量图',
                subtext: '饼图',
                left: 'center',
                  subtextStyle:{
                    fontSize:'14',
                    color:'rgba(0,0,0,0.89)'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '销量',
                  type: 'pie',
                  radius: '50%',
                  data: dict,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            option && myChart.setOption(option);
            };
        // 大理
        function daLi(){
            var chartDom = document.getElementById('main');
            // 执行前清除 此时页面上所存在的饼图
            // 向将数据传入HTML, if语句清理销量为0的不传入
            chartDom.innerHTML = `
                {% for data in daLi %}
                    {% if data[6] != none %}
                        <p>{{ data[6] }}</p>
                        <p>{{ data[0] }}</p>
                    {% endif %}
                {% endfor %}
            `

            // 获取传入的数据且生成的所有p元素
            var oP = document.querySelectorAll("p");

            // 查看有多少p元素  150个p元素 ，即75对 景点-销量
            console.log(oP)

            // 将数组中的数据 传入字典
            var dict = [];
            // 每次循环添加一个键值对
            for(var i = 0; i < oP.length-30; i++){
                dict.push({"value": oP[i].innerText, "name": oP[i+1].innerText});
                i++;
            }
            console.log(dict);

            // 清除chartDom中的所有p元素 好展示图
            chartDom.innerHTML = '';

            // 制作图
            var myChart = echarts.init(chartDom);
            document.getElementById("main").removeAttribute('_echarts_instance_');
            var option;

            option = {
              title: {
                text: '大理景区-销量图',
                subtext: '饼图',
                left: 'center',
                  subtextStyle:{
                    fontSize:'14',
                    color:'rgba(0,0,0,0.89)'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '销量',
                  type: 'pie',
                  radius: '50%',
                  data: dict,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            option && myChart.setOption(option);
            };
        // 长沙
        function cs(){
            var chartDom = document.getElementById('main');
            // 执行前清除 此时页面上所存在的饼图
            // 向将数据传入HTML, if语句清理销量为0的不传入
            chartDom.innerHTML = `
                {% for data in cs %}
                    {% if data[6] != none %}
                        <p>{{ data[6] }}</p>
                        <p>{{ data[0] }}</p>
                    {% endif %}
                {% endfor %}
            `

            // 获取传入的数据且生成的所有p元素
            var oP = document.querySelectorAll("p");

            // 查看有多少p元素  150个p元素 ，即75对 景点-销量
            console.log(oP)

            // 将数组中的数据 传入字典
            var dict = [];
            // 每次循环添加一个键值对
            for(var i = 0; i < oP.length/2; i++){
                dict.push({"value": oP[i].innerText, "name": oP[i+1].innerText});
                i++;
            }
            console.log(dict);

            // 清除chartDom中的所有p元素 好展示图
            chartDom.innerHTML = '';

            // 制作图
            var myChart = echarts.init(chartDom);
            document.getElementById("main").removeAttribute('_echarts_instance_');
            var option;

            option = {
              title: {
                text: '长沙景区-销量图',
                subtext: '饼图',
                left: 'center',
                subtextStyle:{
                    fontSize:'14',
                    color:'rgba(0,0,0,0.89)'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '销量',
                  type: 'pie',
                  radius: '50%',
                  data: dict,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            option && myChart.setOption(option);
            };
        // 景区饼图数据展示切换
        var select = document.querySelector("select");
        {#var chartDom = document.getElementById('main');#}

        // 首先默认展示 西藏饼图
        xiZang();
        // 下拉框添加事件
        select.addEventListener('change', function (evt){
            var e = evt || window.event;
            var index = select.selectedIndex;
            document.getElementById("main").removeAttribute('_echarts_instance_');
            if(index == 0){
                xiZang();
            }else if(index == 1){
                zjj();
            }else if (index == 2){
                daLi();
            }else{
                cs();
            }

        })


    </script>
    <!-- -->
    <!--张家界-->

</body>
</html>